<template>
  <view class="lifestyle-habits-page">
    <!-- 标题区域 -->
    <view class="page-header">
      <view class="header-content">
        <text class="title-text">生活方式与习惯</text>
        <text class="subtitle-text">Lifestyle & Habits</text>
      </view>
      <view class="header-decoration">
        <view class="decoration-circle"></view>
        <view class="decoration-circle"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="page-content">
      <!-- 饮食习惯 -->
      <view class="category-section">
        <view class="category-header">
          <view class="category-icon">🍽️</view>
          <text class="category-title">饮食习惯</text>
        </view>
        
        <view class="subcategory-list">
          <!-- 饮食 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">饮食</text>
            </view>
            <ItemWithImagesCard
              :model-value="formData.lifestyle_habits.diet_habits.diet"
              @update:model-value="updateDiet"
              :show-title="true"
              title-label="饮食类型"
              title-placeholder="请输入饮食类型"
              description-label="饮食详情"
              description-placeholder="请详细描述您的饮食习惯"
              :description-rows="3"
              border-color="border-blue-300"
              :show-images="true"
              image-label="饮食图片"
            />
          </view>

          <!-- 偏好食物 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">偏好食物</text>
            </view>
            <ItemWithImagesCard
              :model-value="formData.lifestyle_habits.diet_habits.preferred_foods"
              @update:model-value="updatePreferredFoods"
              :show-title="true"
              title-label="食物偏好"
              title-placeholder="请输入您的食物偏好"
              description-label="偏好详情"
              description-placeholder="请详细描述您的食物偏好"
              :description-rows="3"
              border-color="border-green-300"
              :show-images="true"
              image-label="食物图片"
            />
          </view>

          <!-- 营养 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">营养</text>
            </view>
            <view class="nested-item">
              <view class="nested-header">
                <text class="nested-title">营养摄入情况</text>
              </view>
              <ItemWithImagesCard
                :model-value="formData.lifestyle_habits.diet_habits.nutrition.nutrition_intake"
                @update:model-value="updateNutritionIntake"
                :show-title="true"
                title-label="营养类型"
                title-placeholder="请输入营养类型"
                description-label="摄入情况"
                description-placeholder="请描述您的营养摄入情况"
                :description-rows="3"
                border-color="border-yellow-300"
                :show-images="true"
                image-label="营养图表"
              />
            </view>
          </view>
        </view>
      </view>

      <!-- 运动习惯 -->
      <view class="category-section">
        <view class="category-header">
          <view class="category-icon">🏃</view>
          <text class="category-title">运动习惯</text>
        </view>
        
        <view class="subcategory-list">
          <!-- 运动 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">运动</text>
            </view>
            <ItemWithImagesCard
              :model-value="formData.lifestyle_habits.exercise_habits.exercise"
              @update:model-value="updateExercise"
              :show-title="true"
              title-label="运动类型"
              title-placeholder="请输入您常做的运动类型"
              description-label="运动详情"
              description-placeholder="请详细描述您的运动情况"
              :description-rows="3"
              border-color="border-red-300"
              :show-images="true"
              image-label="运动图片"
            />
          </view>

          <!-- 运动频率 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">运动频率</text>
            </view>
            <ItemWithImagesCard
              :model-value="formData.lifestyle_habits.exercise_habits.exercise_frequency"
              @update:model-value="updateExerciseFrequency"
              :show-title="true"
              title-label="频率类型"
              title-placeholder="请输入运动频率"
              description-label="频率详情"
              description-placeholder="请描述您的运动频率"
              :description-rows="3"
              border-color="border-purple-300"
              :show-images="true"
              image-label="频率图表"
            />
          </view>

          <!-- 运动方式 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">运动方式</text>
            </view>
            <ItemWithImagesCard
              :model-value="formData.lifestyle_habits.exercise_habits.exercise_methods"
              @update:model-value="updateExerciseMethods"
              :show-title="true"
              title-label="运动方式"
              title-placeholder="请输入您的运动方式"
              description-label="方式详情"
              description-placeholder="请详细描述您的运动方式"
              :description-rows="3"
              border-color="border-indigo-300"
              :show-images="true"
              image-label="运动方式图"
            />
          </view>
        </view>
      </view>

      <!-- 吸烟情况 -->
      <view class="category-section">
        <view class="category-header">
          <view class="category-icon">🚭</view>
          <text class="category-title">吸烟情况</text>
        </view>
        
        <view class="subcategory-list">
          <!-- 吸烟习惯 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">吸烟习惯</text>
            </view>
            <ItemWithImagesCard
              :model-value="formData.lifestyle_habits.smoking_situation.smoking_habits"
              @update:model-value="updateSmokingHabits"
              :show-title="true"
              title-label="吸烟状态"
              title-placeholder="请输入您的吸烟状态"
              description-label="吸烟详情"
              description-placeholder="请详细描述您的吸烟情况"
              :description-rows="3"
              border-color="border-gray-300"
              :show-images="true"
              image-label="吸烟情况图"
            />
          </view>
        </view>
      </view>

      <!-- 饮酒情况 -->
      <view class="category-section">
        <view class="category-header">
          <view class="category-icon">🍷</view>
          <text class="category-title">饮酒情况</text>
        </view>
        
        <view class="subcategory-list">
          <!-- 饮酒习惯 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">饮酒习惯</text>
            </view>
            <ItemWithImagesCard
              :model-value="formData.lifestyle_habits.drinking_situation.drinking_habits"
              @update:model-value="updateDrinkingHabits"
              :show-title="true"
              title-label="饮酒状态"
              title-placeholder="请输入您的饮酒状态"
              description-label="饮酒详情"
              description-placeholder="请详细描述您的饮酒情况"
              :description-rows="3"
              border-color="border-amber-300"
              :show-images="true"
              image-label="饮酒情况图"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/**
 * 生活方式与习惯页面组件
 * 根据JSON结构展示生活方式与习惯的各个节点
 * @description 每个空字符串节点都使用ItemWithImagesCard组件展示
 */

import { reactive } from 'vue'
import ItemWithImagesCard from './ItemWithImagesCard.vue'

// 表单数据结构
const formData = reactive({
  lifestyle_habits: {
    diet_habits: {
      diet: {
        title: '',
        description: '',
        images: []
      },
      preferred_foods: {
        title: '',
        description: '',
        images: []
      },
      nutrition: {
        nutrition_intake: {
          title: '',
          description: '',
          images: []
        }
      }
    },
    exercise_habits: {
      exercise: {
        title: '',
        description: '',
        images: []
      },
      exercise_frequency: {
        title: '',
        description: '',
        images: []
      },
      exercise_methods: {
        title: '',
        description: '',
        images: []
      }
    },
    smoking_situation: {
      smoking_habits: {
        title: '',
        description: '',
        images: []
      }
    },
    drinking_situation: {
      drinking_habits: {
        title: '',
        description: '',
        images: []
      }
    }
  }
})

// 更新方法
const updateDiet = (data: any) => {
  formData.lifestyle_habits.diet_habits.diet = data
}

const updatePreferredFoods = (data: any) => {
  formData.lifestyle_habits.diet_habits.preferred_foods = data
}

const updateNutritionIntake = (data: any) => {
  formData.lifestyle_habits.diet_habits.nutrition.nutrition_intake = data
}

const updateExercise = (data: any) => {
  formData.lifestyle_habits.exercise_habits.exercise = data
}

const updateExerciseFrequency = (data: any) => {
  formData.lifestyle_habits.exercise_habits.exercise_frequency = data
}

const updateExerciseMethods = (data: any) => {
  formData.lifestyle_habits.exercise_habits.exercise_methods = data
}

const updateSmokingHabits = (data: any) => {
  formData.lifestyle_habits.smoking_situation.smoking_habits = data
}

const updateDrinkingHabits = (data: any) => {
  formData.lifestyle_habits.drinking_situation.drinking_habits = data
}
</script>

<style lang="scss" scoped>
.lifestyle-habits-page {
  width: 100%;
  padding: 32rpx 24rpx;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  box-sizing: border-box;
}

// 标题区域
.page-header {
  width: 100%;
  margin-bottom: 48rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
  
  .header-content {
    flex: 1;
    
    .title-text {
      display: block;
      font-size: 52rpx;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8rpx;
      line-height: 1.2;
    }
    
    .subtitle-text {
      font-size: 26rpx;
      color: #64748b;
      font-weight: 400;
      line-height: 1.4;
    }
  }
  
  .header-decoration {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    
    .decoration-circle {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      
      &:last-child {
        background: linear-gradient(135deg, #8b5cf6, #ec4899);
      }
    }
  }
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.category-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f1f5f9;
  
  .category-icon {
    font-size: 48rpx;
    margin-right: 20rpx;
  }
  
  .category-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #1e293b;
  }
}

.subcategory-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.subcategory-item {
  .subcategory-header {
    margin-bottom: 20rpx;
    
    .subcategory-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #475569;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 24rpx;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        border-radius: 4rpx;
      }
    }
  }
}

.nested-item {
  margin-left: 20rpx;
  padding-left: 20rpx;
  border-left: 2rpx solid #e2e8f0;
  
  .nested-header {
    margin-bottom: 16rpx;
    
    .nested-title {
      font-size: 26rpx;
      font-weight: 500;
      color: #64748b;
      position: relative;
      padding-left: 16rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 20rpx;
        background: linear-gradient(135deg, #8b5cf6, #ec4899);
        border-radius: 3rpx;
      }
    }
  }
}
</style>
